<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body,
        #app {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        header {
            text-align: center;
            line-height: 46px;
            height: 46px;
            background: orange;
            color: #fff;
        }

        .back {
            position: absolute;
            left: 10px;
        }

        main {
            flex: 1;
        }

        footer {
            text-align: center;
            line-height: 46px;
            height: 46px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <my-layout title="登录" :isshowback="false">
            <img slot="img" width="100%" height="180px"
                src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657818000&t=ae9557b80212ae1619d76586feecd45a"
                alt="">

            <my-form title="登录" api="/api/login" slot="form"></my-form>
        </my-layout> -->

        <my-layout title="注册" :isshowback="false">
            <img slot="img" width="100%" height="180px"
                src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657818000&t=ae9557b80212ae1619d76586feecd45a"
                alt="">

            <my-form title="注册" api="/api/register" slot="form"></my-form>
        </my-layout>
    </div>



    <!-- 容器组件 -->
    <template id="layout">
        <div class="box">
            <header v-if="isshowheader">
                <span v-if="isshowback" class="back">
                    返回
                </span>
                {{ title }}
            </header>

            <main>
                <slot name="img"></slot>
                <slot name="form"></slot>
            </main>

            <footer>
                我是底部
            </footer>
        </div>
    </template>


    <!-- 表单组件 -->
    <template id="form">
        <div>
            <p>
                账号：<input type="text">
            </p>
            <p>
                密码：<input type="text">
            </p>
            <p>
                <button @click="sub">
                    {{ title }}
                </button>
            </p>
        </div>
    </template>

    <!-- /api/login -->
    <!-- /api/register -->


    <script src="./vue.js"></script>
    <script>

        const LayOut = {
            template: "#layout",
            props: {
                // 标题
                title: {
                    type: String,
                    default: "我是默认标题"
                },
                // 是否展示返回
                isshowback: {
                    type: Boolean,
                    default: true
                },
                // 是否展示头部
                isshowheader: {
                    type: Boolean,
                    default: true
                }
            }
        }

        const Form = {
            template: "#form",
            props: {
                title: {
                    type: String
                },
                // 接口地址
                api: {
                    type: String
                }
            },
            methods: {
                sub() {
                    console.log(this.api)
                }
            }
        }
        new Vue({
            el: "#app",
            components: {
                "my-layout": LayOut,
                "my-form": Form
            },
            data: {
                msg: "登录"
            }
        })
    </script>
</body>

</html>